import React from 'react';
import {
  View,
  Text,
  StyleSheet,
  FlatList,
  Dimensions,
  Pressable,
} from 'react-native';
import {Card, ServerInfo} from '../types/Card';
import SecureImageView from './SecureImageView';

interface CardGridProps {
  cards: Card[];
  onCardPress: (card: Card) => void;
  focusedCardId?: number | null;
  serverInfo?: ServerInfo;
  showImages?: boolean; // 控制显示图片还是文字
}

const {width} = Dimensions.get('window');
const CARD_SIZE = 180; // 正方形卡片
const COLUMNS = Math.floor((width - 40) / (CARD_SIZE + 20)); // 考虑边距

export const CardGrid: React.FC<CardGridProps> = ({
  cards,
  onCardPress,
  focusedCardId,
  serverInfo,
  showImages = true, // 默认显示图片
}) => {
  const renderCard = ({item, index}: {item: Card; index: number}) => {
    const isSelected = focusedCardId === item.id;
    
    return (
      <Pressable
        style={[
          styles.card,
          isSelected && styles.selectedCard,
        ]}
        onPress={() => onCardPress(item)}
        tvParallaxProperties={{
          enabled: true,
          shiftDistanceX: 2.0,
          shiftDistanceY: 2.0,
          tiltAngle: 0.05,
          magnification: 1.1,
        }}>
        <View style={styles.cardContent}>
          {showImages ? (
            /* 卡片图片 */
            <SecureImageView
              source={{ uri: item.front_image }}
              style={styles.cardImage}
              serverInfo={serverInfo}
            />
          ) : (
            /* 卡片文字 */
            <View style={styles.cardTextContainer}>
              <Text style={styles.cardTitle} numberOfLines={2}>
                {item.title}
              </Text>
              {item.back_text && (
                <Text style={styles.cardDescription} numberOfLines={4}>
                  {item.back_text}
                </Text>
              )}
            </View>
          )}
        </View>
      </Pressable>
    );
  };

  if (cards.length === 0) {
    return (
      <View style={styles.emptyContainer}>
        <Text style={styles.emptyText}>暂无卡片</Text>
      </View>
    );
  }

  return (
    <View style={styles.container}>
      <FlatList
        data={cards}
        renderItem={renderCard}
        keyExtractor={(item) => item.id.toString()}
        numColumns={COLUMNS}
        contentContainerStyle={styles.gridContainer}
        showsVerticalScrollIndicator={false}
        showsHorizontalScrollIndicator={false}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  gridContainer: {
    padding: 20,
  },
  card: {
    width: CARD_SIZE,
    height: CARD_SIZE,
    margin: 10,
    backgroundColor: '#2a2a2a',
    borderRadius: 12,
    padding: 8,
    borderWidth: 2,
    borderColor: 'transparent',
    overflow: 'hidden',
  },
  selectedCard: {
    borderColor: '#4a90e2',
    backgroundColor: '#3a3a3a',
    borderWidth: 3,
    shadowColor: '#4a90e2',
    shadowOffset: {
      width: 0,
      height: 0,
    },
    shadowOpacity: 0.5,
    shadowRadius: 10,
    elevation: 8,
  },

  cardContent: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  cardImage: {
    width: CARD_SIZE - 16,
    height: CARD_SIZE - 16,
    borderRadius: 8,
    backgroundColor: '#1a1a1a',
  },
  cardTextContainer: {
    width: CARD_SIZE - 16,
    height: CARD_SIZE - 16,
    borderRadius: 8,
    backgroundColor: '#1a1a1a',
    padding: 12,
    justifyContent: 'center',
    alignItems: 'center',
  },
  cardTitle: {
    fontSize: 16,
    fontWeight: 'bold',
    textAlign: 'center',
    color: '#ffffff',
    marginBottom: 8,
  },
  cardDescription: {
    fontSize: 12,
    textAlign: 'center',
    color: '#cccccc',
    lineHeight: 16,
  },


  emptyContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  emptyText: {
    fontSize: 18,
    color: '#ffffff',
  },
}); 